<!-- 资产概况 -->
<template>
  <div class=''>
    <el-row class="title">
      <span>基础数据</span>
    </el-row>
    <el-row class="card-title" :gutter="32">
      <!-- <el-col :xs="24" :sm="24" :lg="5">
        <el-card class="card-title1">
          <div class="title_1">巡查处数</div>
          <div class="title_2">{{totals.total1|format}}处</div>
        </el-card>
      </el-col> -->
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card @click.native="handleTableDialog(1)" class="card-title2 change">
          <div class="title_1">当前隐患</div>
          <div class="title_3">{{totals.total2|format}}处</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card @click.native="handleTableDialog(2)" class="card-title3 change">
          <div class="title_1">正在整改</div>
          <div class="title_4">{{totals.total3|format}}处</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card @click.native="handleTableDialog(3)" class="card-title4 change">
          <div class="title_1">未整改处数</div>
          <div class="title_5">{{totals.total4|format}}处</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card @click.native="handleTableDialog(4)" class="card-title4 change">
          <div class="title_1">当年已整改</div>
          <div class="title_5">{{totals.total5|format}}处</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="row_spacing" :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card class="chart-wrapper">
          <span class="danwei">单位(处)</span>
          <pie-chart v-if="JSON.stringify(pieOption.pieOption1)!='{}'" :pieData="pieOption.pieOption1" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card class="chart-wrapper">
          <span class="danwei">单位(处)</span>
          <pie-chart v-if="JSON.stringify(pieOption.pieOption2)!='{}'" :pieData="pieOption.pieOption2" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card class="chart-wrapper">
          <span class="danwei">单位(处)</span>
          <pie-chart v-if="JSON.stringify(pieOption.pieOption3)!='{}'" :pieData="pieOption.pieOption3" />
        </el-card>
      </el-col>
    </el-row>
    <el-row class="title">
      <span>数据分析</span>
    </el-row>
    <el-row :gutter="32">
      <el-card class="chart-wrapper">
        <el-row :gutter="32" class="tools">
          <el-cascader size="mini" v-model="type" :options="typeOptions" :props="{ expandTrigger: 'hover' }" @change="selectTypeChange"></el-cascader>
          <el-select v-model="value" size="mini" @change="selectChange" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-radio-group @change="radioChange" v-model="radio" size="mini">
            <el-radio-button v-for="(item,index) in radios" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
          <el-date-picker v-if="value==='1'" v-model="time" type="daterange" align="right" @change="dateChange" unlink-panels value-format="timestamp" size="mini" style="float:right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-row>
        <bar-chart v-if="JSON.stringify(barOptions)!='{}'&&value==='1'" :barData="barOptions"></bar-chart>
        <bar-chart2 v-if="JSON.stringify(barOptions2)!='{}'&&value==='2'" :barData="barOptions2"></bar-chart2>
        <bar-chart3 v-if="JSON.stringify(barOptions3)!='{}'&&value==='3'" :barData="barOptions3"></bar-chart3>
      </el-card>
    </el-row>
    <table-dialog :dialogTableVisible.sync="dialogShow" :loading="loading" :tablePage="tablePage" :tableColumn="tableColumn" :tableData="tableData" @getPage="getPage"></table-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PieChart from "../components/PieChart";
import PieChart2 from "../components/PieChart2";
import PieChart3 from "../components/PieChart3";
import PieChartSafe from "../components/PieChartSafe";
import BarChart from "../components/BarChart";
import { getTableColumn } from "@/utils/baseData";
import BarChart2 from "../components/BarChart2";
import BarChart3 from "../components/BarChart3";
import { pickerOptions, computeTime } from "@/utils/index";
import Radar from "../components/Radar";
import { format } from "path";
import {
  getHidDangerDetails,
  getAbarbeitungDetails,
  getNoAbarbeitungDetails,
  getDangerRoomDetails
} from "@/api/table";
import {
  getPatrol,
  getHidDanger,
  getAba,
  getNoAba,
  getHaving,
  getNotDgRate,
  getHavingRate,
  getYinHuanRate,
  getDgRoomRate,
  getRoomArea,
  getDictionary,
  getStructure,
  getCountBar,
  getAreaBar,
  getChartBar,
  getEarningsBar,
  getAssetsData,
  getPropertyBar,
  getRoomAreaBar,
  getStructureBar,
  getSecData
} from "@/api/charts";
import TableDialog from "../components/TableDialog";
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    PieChart,
    PieChart2,
    TableDialog,
    PieChart3,
    Radar,
    BarChart,
    BarChart2,
    BarChart3,
    PieChartSafe
  },
  data() {
    //这里存放数据
    return {
      dialogShow: false,
      loading: false,
      tablePage: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      changeTable: 1,
      tableData: [],
      tableColumn: [],
      assetNum: {},
      assetArea: {},
      assetType: {},
      assetStructure: {},
      rentArea: {},
      vacancyArea: {},
      hire: {},
      rentNum: {},
      height: "200px",
      height3: "400px",
      totals: {
        total1: "",
        total2: "",
        total3: "",
        total4: "",
        total5: ""
      },
      pieOption: {
        pieOption1: {},
        pieOption2: {},
        pieOption3: {}
      },
      time: [],
      radio: "一年",
      type: ["1"],
      barOptions: {},
      barOptions2: {},
      barOptions3: {},
      changeData: {},
      changeType: "data1",
      barCountData: {},
      barAreaoData: {},
      barTypeData: {},
      radios: ["一月", "三月", "半年", "一年", "全部"],
      options: [
        {
          value: "1",
          label: "基础列表"
        },
        {
          value: "2",
          label: "二年同列"
        },
        {
          value: "3",
          label: "三年同列"
        }
      ],
      typeOptions: [
        {
          value: "1",
          label: "按资产数量"
        },
        {
          value: "2",
          label: "按资产面积"
        },
        {
          value: "3",
          label: "按合同户数"
        },
        {
          value: "4",
          label: "按月租金收入"
        },
        {
          value: "5",
          label: "按巡查处数"
        },
         {
          value: "6",
          label: "按隐患处数"
        },
        {
          value: "7",
          label: "正在整改处数"
        },
        ,
        {
          value: "8",
          label: "未整改处数"
        },
        {
          value: "9",
          label: "无隐患资产占比"
        },
        {
          value: "10",
          label: "隐患资产占比"
        },
        {
          value: "11",
          label: "本年已整改隐患占比"
        }
      ],
      // typeOptions: [
      //   {
      //     value: "01",
      //     label: "基础数据",
      //     children: [
      //       {
      //         value: "1",
      //         label: "巡查处数"
      //       },
      //       {
      //         value: "2",
      //         label: "隐患处数"
      //       },
      //       {
      //         value: "3",
      //         label: "整改处数"
      //       },
      //       {
      //         value: "4",
      //         label: "未整改处数"
      //       },
      //       {
      //         value: "5",
      //         label: "危房处数"
      //       }
      //     ]
      //   },
      //   {
      //     label: "所占比例",
      //     children: [
      //       {
      //         value: "6",
      //         label: "隐患率"
      //       },
      //       {
      //         value: "7",
      //         label: "整改率"
      //       },
      //       {
      //         value: "8",
      //         label: "危房率"
      //       }
      //     ]
      //   }
      // ],
      pickerOptions: {
        shortcuts: pickerOptions
      },
      value: "1"
    };
  },
  //监听属性 类似于data概念
  computed: {},
  filters: {
    format(num) {
      var reg = /\d{1,3}(?=(\d{3})+$)/g;
      return (num + "").replace(reg, "$&,");
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    change() {},
    getPage({ page, limit }) {
      this.tablePage.pageIndex = page;
      this.tablePage.pageSize = limit;
      this.getTableInfo(this.changeTable);
    },
    getTableInfo(val) {
      this.loading = true;
      switch (val) {
        case 1:
          getHidDangerDetails(this.tablePage)
            .then(res => {
              this.tableData = res.data;
              this.tablePage.total = res.allCount;
              this.loading = false;
            })
            .catch(e => {
              this.loading = false;
            });
          break;
        case 2:
          getAbarbeitungDetails(this.tablePage)
            .then(res => {
              this.tableData = res.data;
              this.tablePage.total = res.allCount;
              this.loading = false;
            })
            .catch(e => {
              this.loading = false;
            });
          break;
        case 3:
          getNoAbarbeitungDetails(this.tablePage)
            .then(res => {
              this.tableData = res.data;
              this.tablePage.total = res.allCount;
              this.loading = false;
            })
            .catch(e => {
              this.loading = false;
            });
          break;
        case 4:
          getDangerRoomDetails(this.tablePage)
            .then(res => {
              this.tableData = res.data;
              this.tablePage.total = res.allCount;
              this.loading = false;
            })
            .catch(e => {
              this.loading = false;
            });
          break;

        default:
          break;
      }
    },
    handleTableDialog(val) {
      this.dialogShow = true;
      switch (val) {
        case 1:
          this.changeTable = 1;
          this.getTableInfo(1);
          this.tableColumn = getTableColumn("asset");
          break;
        case 2:
          this.changeTable = 2;
          this.getTableInfo(2);
          this.tableColumn = getTableColumn("asset");
          break;
        case 3:
          this.changeTable = 3;
          this.getTableInfo(3);
          this.tableColumn = getTableColumn("asset");
          break;
        case 4:
          this.changeTable = 4;
          this.getTableInfo(4);
          this.tableColumn = getTableColumn("asset");
          break;
        default:
          break;
      }
    },
    updateOption() {
      //单列数据
      if (this.value === "1") {
        let start = (
          ((this.barCountData.date.length - 11) /
            this.barCountData.date.length) *
          100
        ).toFixed(2);
        this.barOptions = {
          dataZoom: [{ start: start }],
          xAxis: [{ data: this.barCountData.date }],
          legend: {
            data: [this.barCountData.data1.name]
          },
          series: [
            {
              name: this.barCountData.data1.name,
              data: this.barCountData.data1.value
            }
          ]
        };
      } else if (this.value === "2") {
        this.barOptions2 = {
          dataset: {
            source: this.barCountData.data1.value
          },
          series: [
            {
              name: this.barCountData.data1.value[0][1]
            },
            {
              name: this.barCountData.data1.value[0][2]
            }
          ]
        };
      }
      //多列数据
      else {
        this.barOptions3 = {
          dataset: {
            source: this.barCountData.data1.value
          },
          series: [
            {
              name: this.barCountData.data1.value[0][1]
            },
            {
              name: this.barCountData.data1.value[0][2]
            },
            {
              name: this.barCountData.data1.value[0][3]
            }
          ]
        };
      }
    },
    //下拉分列变化
    selectChange(value) {
      console.log("列数下拉项变化 ", value);
      let year = new Date().getFullYear();
      let start = computeTime(year, 1)[0];
      //防止接口报错
      // if (this.time[0] === start) {
      //   this.time = [];
      // }
      getAssetsData({
        name: this.type[0],
        column: value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        this.updateOption();
      });
    },
    //下拉分类变化
    selectTypeChange(value) {
      getAssetsData({
        name: value[0],
        column: this.value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        this.updateOption();
      });
    },
    //单选框事件
    radioChange(value) {
      console.log("单选框值 ", value);
      let start = 0;
      console.log("barOptions", this.barOptions);
      // this.barOptions.dataZoom = [{ start: 0 }];
      switch (value) {
        case "一月":
          this.barOptions.dataZoom[0].start = 100;
          break;
        case "三月":
          start = (
            ((this.barCountData.date.length - 2) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "半年":
          start = (
            ((this.barCountData.date.length - 5) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "一年":
          start = (
            ((this.barCountData.date.length - 11) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "全部":
          this.barOptions.dataZoom[0].start = 0;
          break;
        default:
          break;
      }
    },
    //时间切换
    dateChange(value) {
      console.log("时间项值 ", value);
      if (this.time === null) {
        this.time = [];
      }
      getAssetsData({
        name: this.type[0],
        column: this.value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        this.updateOption();
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let year = new Date().getFullYear();
    let start = computeTime(year, 1)[0];
    let end = computeTime(year, 12)[1];
    this.time = [start, end];
    // getPatrol().then(res => {
    //   this.totals.total1 = res.巡查次数;
    // });
    getHidDanger().then(res => {
      this.totals.total2 = res.隐患处数;
    });
    getAba().then(res => {
      this.totals.total3 = res.正在整改;
    });
    getNoAba().then(res => {
      this.totals.total4 = res.未整改处数;
    });
    getHaving().then(res => {
      this.totals.total5 = res[0].整改完成;
    });
    getNotDgRate().then(res => {
      this.pieOption.pieOption1 = {
        title: {
          text: "隐患资产占比"
        },
        series: [
          {
            name: "隐患资产占比",
            data: res
          }
        ]
      };
      // this.pieOption.pieOption1 = {
      //   title: {
      //     text: "隐患率"
      //   },
      //   legend: {
      //     data: ["隐患率"]
      //   },
      //   series: [
      //     {
      //       name: "Line 1",
      //       type: "pie",
      //       clockWise: true,
      //       radius: ["50%", "66%"],
      //       hoverAnimation: false,
      //       data: [
      //         {
      //           value: res.隐患率,
      //           name: "隐患率",
      //           label: {
      //             normal: {
      //               formatter: function(params) {
      //                 return params.value + "%";
      //               },
      //               position: "center",
      //               show: true,
      //               textStyle: {
      //                 fontSize: "25",
      //                 fontWeight: "bold",
      //                 color: "#fed4b7"
      //               }
      //             }
      //           },
      //           itemStyle: {
      //             normal: {
      //               color: "#fed4b7",
      //               label: {
      //                 show: false
      //               },
      //               labelLine: {
      //                 show: false
      //               }
      //             }
      //           }
      //         },
      //         {
      //           name: "02",
      //           value: 100 - res.隐患率,
      //           itemStyle: {
      //             normal: {
      //               color: "#e6e6e6",
      //               label: {
      //                 show: false
      //               },
      //               labelLine: {
      //                 show: false
      //               }
      //             }
      //           }
      //         }
      //       ]
      //     }
      //   ]
      // };
    });
    getHavingRate().then(res => {
      this.pieOption.pieOption2 = {
        title: {
          text: "历来隐患情况统计"
        },
        series: [
          {
            name: "历来隐患情况统计",
            data: res
          }
        ]
      };
    });
    getYinHuanRate().then(res => {
      this.pieOption.pieOption3 = {
        title: {
          text: "本年整改情况"
        },
        series: [
          {
            name: "本年整改情况",
            data: res
          }
        ]
      };
    });
    getAssetsData({ name: "1", column: "1", time: this.time }).then(res => {
      this.barCountData = res;
      const start = (
        ((this.barCountData.date.length - 11) / this.barCountData.date.length) *
        100
      ).toFixed(2);
      this.barOptions = {
        dataZoom: [{ start: start }],
        title: {
          text: res.title,
          subtext: res.title
        },
        xAxis: [{ data: res.date }],
        legend: {
          data: [res.data1.name]
        },
        series: [
          {
            name: res.data1.name,
            data: res.data1.value
          }
        ]
      };
    });
    // axios
    //   .all([
    //     getPatrol(),
    //     getHidDanger(),
    //     getAba(),
    //     getNoAba(),
    //     getDgRoom(),
    //     getHidRate(),
    //     getAbaRate(),
    //     getDgRoomRate(),
    //     getSecData({ name: "1", column: "1", time: this.time })
    //   ])
    //   .then(
    //     axios.spread(
    //       (
    //         total1,
    //         total2,
    //         total3,
    //         total4,
    //         total5,
    //         pie1,
    //         pie2,
    //         pie3,
    //         propertybar
    //       ) => {
    //         this.totals.total1 = total1.巡查次数;
    //         this.totals.total2 = total2.隐患处数;
    //         this.totals.total3 = total3.整改处数;
    //         this.totals.total4 = total4.未整改处数;
    //         this.totals.total5 = total5.危房处数;
    //         this.pieOption.pieOption1 = {
    //           title: {
    //             text: "隐患率"
    //           },
    //           legend: {
    //             data: ["隐患率"]
    //           },
    //           series: [
    //             {
    //               name: "Line 1",
    //               type: "pie",
    //               clockWise: true,
    //               radius: ["50%", "66%"],
    //               hoverAnimation: false,
    //               data: [
    //                 {
    //                   value: pie1.隐患率,
    //                   name: "隐患率",
    //                   label: {
    //                     normal: {
    //                       formatter: function(params) {
    //                         return params.value + "%";
    //                       },
    //                       position: "center",
    //                       show: true,
    //                       textStyle: {
    //                         fontSize: "25",
    //                         fontWeight: "bold",
    //                         color: "#fed4b7"
    //                       }
    //                     }
    //                   },
    //                   itemStyle: {
    //                     normal: {
    //                       color: "#fed4b7",
    //                       label: {
    //                         show: false
    //                       },
    //                       labelLine: {
    //                         show: false
    //                       }
    //                     }
    //                   }
    //                 },
    //                 {
    //                   name: "02",
    //                   value: 100 - pie1.隐患率,
    //                   itemStyle: {
    //                     normal: {
    //                       color: "#e6e6e6",
    //                       label: {
    //                         show: false
    //                       },
    //                       labelLine: {
    //                         show: false
    //                       }
    //                     }
    //                   }
    //                 }
    //               ]
    //             }
    //           ]
    //         };
    //         this.pieOption.pieOption2 = {
    //           title: {
    //             text: "整改率"
    //           },
    //           legend: {
    //             data: ["整改率"]
    //           },
    //           series: [
    //             {
    //               name: "Line 1",
    //               type: "pie",
    //               clockWise: true,
    //               radius: ["50%", "66%"],
    //               hoverAnimation: false,
    //               data: [
    //                 {
    //                   value: pie2.整改率,
    //                   name: "整改率",
    //                   label: {
    //                     normal: {
    //                       formatter: function(params) {
    //                         return params.value + "%";
    //                       },
    //                       position: "center",
    //                       show: true,
    //                       textStyle: {
    //                         fontSize: "25",
    //                         fontWeight: "bold",
    //                         color: "#34cdec"
    //                       }
    //                     }
    //                   },
    //                   itemStyle: {
    //                     normal: {
    //                       color: "#34cdec",
    //                       label: {
    //                         show: false
    //                       },
    //                       labelLine: {
    //                         show: false
    //                       }
    //                     }
    //                   }
    //                 },
    //                 {
    //                   name: "02",
    //                   value: 100 - pie2.整改率,
    //                   itemStyle: {
    //                     normal: {
    //                       color: "#e6e6e6",
    //                       label: {
    //                         show: false
    //                       },
    //                       labelLine: {
    //                         show: false
    //                       }
    //                     }
    //                   }
    //                 }
    //               ]
    //             }
    //           ]
    //         };
    //         this.pieOption.pieOption3 = {
    //           title: {
    //             text: "危房率"
    //           },
    //           legend: {
    //             data: ["危房率"]
    //           },
    //           series: [
    //             {
    //               name: "Line 1",
    //               type: "pie",
    //               clockWise: true,
    //               radius: ["50%", "66%"],
    //               hoverAnimation: false,
    //               data: [
    //                 {
    //                   value: pie3.危房率,
    //                   name: "危房率",
    //                   label: {
    //                     normal: {
    //                       formatter: function(params) {
    //                         return params.value + "%";
    //                       },
    //                       position: "center",
    //                       show: true,
    //                       textStyle: {
    //                         fontSize: "25",
    //                         fontWeight: "bold",
    //                         color: "#c886e4"
    //                       }
    //                     }
    //                   },
    //                   itemStyle: {
    //                     normal: {
    //                       color: "#c886e4",
    //                       label: {
    //                         show: false
    //                       },
    //                       labelLine: {
    //                         show: false
    //                       }
    //                     }
    //                   }
    //                 },
    //                 {
    //                   name: "02",
    //                   value: 100 - pie3.危房率,
    //                   itemStyle: {
    //                     normal: {
    //                       color: "#e6e6e6",
    //                       label: {
    //                         show: false
    //                       },
    //                       labelLine: {
    //                         show: false
    //                       }
    //                     }
    //                   }
    //                 }
    //               ]
    //             }
    //           ]
    //         };
    //         this.barCountData = propertybar;
    //         const start = (
    //           ((this.barCountData.date.length - 11) /
    //             this.barCountData.date.length) *
    //           100
    //         ).toFixed(2);
    //         this.barOptions = {
    //           dataZoom: [{ start: start }],
    //           title: {
    //             text: propertybar.title,
    //             subtext: propertybar.title
    //           },
    //           xAxis: [{ data: propertybar.date }],
    //           legend: {
    //             data: [propertybar.data1.name]
    //           },
    //           series: [
    //             {
    //               name: propertybar.data1.name,
    //               data: propertybar.data1.value
    //             }
    //           ]
    //         };
    //       }
    //     )
    //   );
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$card-height: 100px;
$title-size: 30px;
.chart-wrapper {
  position: relative;
}
.danwei {
  position: absolute;
  z-index: 100;
  font-size: 12px;
  right: 20px;
  outline: none;
  border: none;
}
.card-title {
  margin-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #dce0e4;
  text-align: center;
  .change {
    cursor: pointer;
  }
  .change:hover {
    color: #0f6cec;
    .title_2 {
      color: #0f6cec;
    }
    .title_3 {
      color: #0f6cec;
    }
    .title_4 {
      color: #0f6cec;
    }
    .title_5 {
      color: #0f6cec;
    }
  }
  .title_1 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .title_2 {
    font-size: $title-size;
    color: #34cdec;
  }
  .title_3 {
    font-size: $title-size;
    color: #9968ff;
  }
  .title_4 {
    font-size: $title-size;
    color: #ff9a54;
  }
  .title_5 {
    font-size: $title-size;
    color: #0f6cec;
  }
  .card-title1 {
    background: url("../../../assets/blue.png");
    height: $card-height;
  }
  .card-title2 {
    background: url("../../../assets/purple.png");
    height: $card-height;
  }
  .card-title3 {
    background: url("../../../assets/orange.png");
    height: $card-height;
  }
  .card-title4 {
    background: url("../../../assets/deepblue.png");
    height: $card-height;
  }
}

.el-card {
  border: 0px;
}
.tools {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
// .title_1 {
//   font-size: 18px;
//   color: #34edec;
// }
// .title_2 {
//   font-size: 30px;
//   color: #34edec;
// }
</style>
